<template>
	<view class="">
		<view class="shop_info" v-if="isShow"> 
			<u-swiper 
			     @click="imgPreview"
				:list="shopInfo.imageUrls" 
				:height="350" 
				:imgMode="aspectFill" 
				:radius="4" 
				indicator 
				indicatorMode="dot" 
				circular>
			</u-swiper>
			<view class="content_box">
				<view class="content_head">
					<view class="content_head_title">
						{{shopInfo.shopName}}
					</view>
					<view class="content_head_tag">
						<text>轻盈通透 自在无感</text>
						<text>精选面料</text>
					</view>
					<!-- <view class="content_head_content">
					    【650ml】 "一口爆汁，满嘴清甜"； 优选当季优选当季优选当季当季优选当优选当季优选当季优季优选当季优选当季优选当季优选当季优选当季优选当季优选当季优选当季优选当季优选当季优选当季
					</view> -->
				</view>
				<view class="content_size">
					<view class="content_size_title">
						颜色
					</view>
					<view class="content_size_tag">
						<!-- <text>极致灰</text>
						<text>炫彩紫</text>
						<text>花青</text>
						<text>水绿</text>
						<text>珊瑚粉</text>
						<text>薄荷绿</text> -->
						<text v-for="(color,i) in shopInfo.shopColor" :key="i">{{color}}</text>
					</view>
				</view>
				<view class="content_size">
					<view class="content_size_title">
						码数
					</view>
					<view class="content_size_tag">
						<!-- <text>均码</text>
						<text>S</text>
						<text>M</text>
						<text>L</text>
						<text>XL</text>
						<text>XXL</text> -->
						<text v-for="(size,i) in shopInfo.shopSize" :key="i">{{size}}</text>
					</view>
				</view>
				<view class="content_price">
					<view class="content_price_title">
						价格
					</view>
					<view class="content_price_tag">
						<view>
							<image src="../../static/images/heart.png" mode="aspectFill"></image>
							<text>￥{{shopInfo.shopPrice}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="no_data" v-else>
			<image src="../../static/暂无数据.svg" mode=""></image>
			<text>无此商品</text>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				list1: [
					// 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					// 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					// 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				shopCode: '0952',
				shopId: '',
				shopInfo: [],
				isShow:true
			}
		},
		methods:{
			imgPreview(index){
				console.log('----',index)
				console.log('----',this.shopInfo.imageUrls[index])
				uni.previewImage({
					indicator:"number",
					loop:true,
					urls: this.shopInfo.imageUrls[index]
				})
			},
		},
		onLoad(option) {
			this.shopCode = option.shopCode || '0952'
			this.shopId = option.shopId
			console.log('id',this.shopId)
			console.log('shopCode',this.shopCode)
			console.log('this.shopCode', this.shopCode)
			if (this.shopId) {
				uniCloud.callFunction({
					name: 'getDetail',
					data: {
						shopId: this.shopId
					},
					success: (res) => {
						console.log('成功了ID', res)
						this.shopInfo = res.result.data
					},
					fail: (res) => {
						console.log('失败了', res)
					}
				})
			} else {
				uniCloud.callFunction({
					name: 'getShop',
					data: {
						shopCode: this.shopCode
					},
					success: (res) => {
						console.log('成功了Code', res)
						if(res.result.data.length === 0){
							this.isShow = false
						}
						this.shopInfo = res.result.data[0]
						// this.list1 = this.shopInfo[0].imageUrls
					},
					fail: (res) => {
						console.log('失败了', res)
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.shop_info{
		margin-top: 30rpx;
		padding: 0 30rpx;
		.content_box{
			font-size: 24rpx;
			// padding: 0 30rpx;
			color: rgba(63,64,63,0.8);
			.content_head{
				margin-top: 30rpx;
				.content_head_title{
					font-size: 40rpx;
					color: rgba(63,64,63,1);
					font-weight: 700;
				}
				.content_head_tag{
					margin: 20rpx 0 40rpx 0;
					text{
						padding: 4rpx 16rpx;
						border-radius: 4rpx;
						color:  rgba(255,182,193,1);
						background-color: rgba(255,192,203,0.5);
						&:last-child{
							margin-left: 10rpx;
							color: rgba(63,64,63,0.5);
							background-color: rgba(	220,220,220,0.3);
						}
					}
				}
				.content_head_content{
					
				}
			}
			.content_size{
				margin-top: 40rpx;
				.content_size_title{
					font-weight: 600;
				}
				.content_size_tag{
					text{
						display: inline-block;
						margin: 20rpx 20rpx 0 0;
						padding: 12rpx 24rpx;
						border-radius: 8rpx;
						border: 2rpx solid rgba(63,64,63,0.5);
					}
					
				}
			}
			.content_price{
				margin-top: 40rpx;
				.content_price_title{
					font-weight: 600;
				}
				.content_price_tag{
					view{
						font-weight: 600;
						// display: flex;
						// justify-content: center;
						align-items: center;
						display: inline-block;
						text-align: center;
						height: 56rpx;
						line-height: 56rpx;
						margin: 20rpx 20rpx 0 0;
						padding: 0 24rpx;
						border-radius: 8rpx;
						border: 4rpx solid rgba(175, 210, 65, 1);
						image{
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
			
		}
	}
	.no_data{
		display: flex;
		justify-items: center;
		align-items: center;
		flex-direction: column;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
</style>
